import QtQuick 1.1
import StarMenu 1.0
import com.nokia.meego 1.1

Rectangle {
    id: main
    width: 1280; height: 720
//    width: 858; height: 480


    Image {
        id: image1
        x: 0
        y: 0
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0
        anchors.fill: parent
        smooth: true
        fillMode: Image.Tile
        source: "1-lowres2.jpg"
    }


    Rectangle {
        id: textRect
        property alias text: textOut.text
        x: 14
        y: 14
        width: 180
        height: main.height - 28
        color: Qt.rgba(1,1,1, 0.5)
        border.width: 1
        border.color: "#000000"

        ScrollDecorator {
            flickableItem: flickableText
        }

        Flickable {
            id: flickableText
            anchors.fill: parent
            anchors.margins: 10
            contentWidth: textOut.width; contentHeight: textOut.height
            Text {
                id: textOut
                clip: true
                wrapMode: Text.WordWrap
                width: textRect.width-20
                anchors.margins: 10
                font.pixelSize: 12
            }
        }
    }

    Rectangle {
        id: showExample; width: 100; height: 37
        anchors.bottom: textRect.bottom
        anchors.left: textRect.right
        color: "#732627"
        border.color: "#000000"

        Text {
            id: textExample
            text: qsTr("show code\nexample")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }


    MouseArea {
        id: showCode
        anchors.fill: showExample
        onClicked: textRect.text =
                 "<strong>StarMenu and StarItem components</strong><br>"+
                 "Simple as MouseArea, Menu and MenuItem<br><br>"+
                 "Usage Example:<br>"+
                 "<br>"+
                 "<strong>StarMenu {</strong><br>"+
                 "&nbsp;&nbsp;anchors.fill: parent<br>"+
                 "&nbsp;&nbsp;<strong>radius:</strong> 130<br>"+
                 "&nbsp;&nbsp;<strong>delayChangePos:</strong> 100<br>"+
                 "&nbsp;&nbsp;<strong>starCenterVisible:</strong> true<br>"+
                 "&nbsp;&nbsp;<strong>useParentMenuCenter:</strong> true<br>"+
                 "<br>"+
                 "&nbsp;&nbsp;<strong>StarItem {</strong><br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  width: 64; height: 64<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  <strong>onHoverItem:</strong> [...]<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  <strong>onLeaveItem:</strong> [...]<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  <strong>delayChangePos:</strong> 50<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  <strong>zoomHoverValue:</strong> 2<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  Behavior on x { NumberAnimation { [...] } }<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  Image {<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   anchors.fill: parent<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   [...]"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  }<br>"+
                 "&nbsp;&nbsp;}<br>"+
                 "&nbsp;&nbsp;  <strong>StarItem {</strong><br>"+
                 "&nbsp;&nbsp;  [...]<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  <strong>StarMenu {</strong><br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [...]<br>"+
                 "&nbsp;&nbsp;&nbsp;&nbsp;  }<br>"+
                 "&nbsp;&nbsp;}<br>"

    }

    Text {
        id: pressQtLogo
        x: textRect.x + textRect.width+10
        y: textRect.y
        color: "#ffffff"
        font.pixelSize: 18
        font.bold: true
        text: qsTr("Press Qt logo icon for sub menus")
    }

    /////////////////////////////////////
    /// Buttons Menus
    /////////////////////////////////////
    Rectangle {
        id: rect; width: (main.width-(textRect.x+textRect.width+10))/4; height: 53;
        x:textRect.x+textRect.width+10; y:50
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text1
            text: qsTr("1\ncircle shape 1")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }

    Rectangle {
        id: rect2; width: rect.width; height: rect.height;
        anchors.left: rect.right; y: rect.y
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text2
            text: qsTr("2\ncircle shape 2")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }


    Rectangle {
        id: rect3; width: rect.width; height: rect.height;
        anchors.left: rect2.right; y: rect.y
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text3
            text: qsTr("3\nhiding items")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }


    Rectangle {
        id: rect4; width: rect.width; height: rect.height;
        anchors.left: rect3.right; y: rect.y
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text4
            text: qsTr("4\nevery components\nas item entries")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }


    Rectangle {
        id: rect5; width: rect.width; height: rect.height;
        anchors.left: rect.left; y: rect.y+rect.height+10
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text5
            text: qsTr("5\ngrid and\nspiral shape")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }


    Rectangle{
        id: rect6; width: rect.width; height: rect.height;
        anchors.left: rect5.right; y: rect5.y
        color: "#732627"
        radius: 12
        border.color: "#000000"
        border.width: 1
        Text {
            anchors.top: parent.top
            width: parent.width
            height: 30
            font.pixelSize: 12
            text: qsTr("6\nFlickr search")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            color: "#ffffff"
        }
        Rectangle {
            anchors.bottom: rect6.bottom
            height: 20
            anchors.right: rect6.right
            anchors.rightMargin: 15
            anchors.left: rect6.left
            anchors.leftMargin: 15
            anchors.bottomMargin: 3
            radius: 5
            TextInput {
                id: flickrSearch
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 12
                horizontalAlignment: TextInput.AlignHCenter
                cursorVisible: true
                anchors.fill: parent
                onAccepted: {
                    menu6.rep.model = undefined;
                    menu6.tag = flickrSearch.text;
                    closeSoftwareInputPanel();
                }
            }
        }
    }


    Rectangle {
        id: rect7; width: rect.width; height: rect.height;
        anchors.left: rect6.right; y: rect6.y
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text7
            text: qsTr("7\nline shape")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }


    Rectangle {
        id: rect8; width: rect.width; height: rect.height;
        anchors.left: rect7.right; y: rect7.y
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text8
            text: qsTr("8\nline shape.\nHow it works")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }


    Rectangle {
        id: rect9; width: rect.width; height: rect.height;
        anchors.left: rect.left; y: rect5.y+rect5.height+10
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text9
            text: qsTr("9\ndrop down menu")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }

    Rectangle {
        id: rect10; width: rect.width; height: rect.height;
        anchors.left: rect9.right; y: rect9.y
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text10
            text: qsTr("10\nsimple dock")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }

    Rectangle {
        id: rect11; width: rect.width; height: rect.height;
        anchors.left: rect10.right; y: rect10.y
        color: "#732627"
        radius: 12
        border.color: "#000000"

        Text {
            id: text11
            text: qsTr("11\nmulti menu")
            color: "#ffffff"
            font.bold: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 12
        }
    }

/////////////////////////////////////////////////
// Backgroung for "simple dock" example
    Rectangle {
        id: mainRect
        x: (main.width-width)>>1
        y: main.height-height+radius
        width: 380
        height: 90
        radius: 13
        visible: menu10.menuOpen

        gradient: Gradient {
            GradientStop {
                position: 0
                color: Qt.rgba(.1,.1,.1, 0.2)
            }
            GradientStop {
                position: 0.450
                color: Qt.rgba(.3,.3,.3, 0.8)
            }
            GradientStop {
                position: 0.500
                color: Qt.rgba(.8,.8,.8, 0.8)
            }
            GradientStop {
                position: 0.600
                color: Qt.rgba(.5,.5,.5, 1)
            }
        }
    }


///////////////////////////////////////////////////
// StarMenu binds
    Menu1 {
        id: menu1
        anchors.fill: rect
    }

    Menu2 {
        id: menu2
        anchors.fill: rect2
    }

    Menu3 {
        id: menu3
        anchors.fill: rect3
    }

    Menu4 {
        id: menu4
        anchors.fill: rect4
    }

    Menu5 {
        id: menu5
        anchors.fill: rect5
    }

    Menu6 {
        id: menu6
        anchors.fill: rect6
    }

    Menu7 {
        id: menu7
        anchors.fill: rect7
    }

    Menu8 {
        id: menu8
        anchors.fill: rect8
    }

    Menu9 {
        id: menu9
        anchors.fill: rect9
    }

    Menu10 {
        id: menu10
        anchors.fill: rect10
    }

    Menu11 {
        id: menu11
        anchors.fill: rect11
    }
}

